<template>
  <div class="control-grid">
    <!-- 重启设备 -->
    <div class="control-item" :class="{ active: controls.restart }" @click="handleControl('restart')">
      <div class="control-icon">
        <el-icon><Refresh /></el-icon>
      </div>
      <div class="control-content">
        <div class="control-name">重启设备</div>
        <div class="control-status" :class="{ restarting: controls.restart }">
          {{ controls.restart ? '重启中' : '已就绪' }}
        </div>
      </div>
    </div>

    <!-- 蜂鸣器 -->
    <div class="control-item" :class="{ active: controls.buzzer }" @click="handleControl('buzzer')">
      <div class="control-icon">
        <el-icon><Bell /></el-icon>
      </div>
      <div class="control-content">
        <div class="control-name">蜂鸣器</div>
        <div class="control-status" :class="{ off: !controls.buzzer }">
          {{ controls.buzzer ? '已开启' : '已关闭' }}
        </div>
      </div>
    </div>

    <!-- 风扇控制 -->
    <div class="control-item" :class="{ active: controls.fan }" @click="handleControl('fan')">
      <div class="control-icon">
        <el-icon><WindPower /></el-icon>
      </div>
      <div class="control-content">
        <div class="control-name">风扇</div>
        <div class="control-status" :class="{ off: !controls.fan }">
          {{ controls.fan ? '已开启' : '已关闭' }}
        </div>
      </div>
    </div>

    <!-- 温湿度控制 -->
    <div class="control-item" :class="{ active: controls.tempHumidity }" @click="handleControl('tempHumidity')">
      <div class="control-icon">
        <el-icon><Sunny /></el-icon>
      </div>
      <div class="control-content">
        <div class="control-name">日光灯</div>
        <div class="control-status" :class="{ off: !controls.tempHumidity }">
          {{ controls.tempHumidity ? '已开启' : '已关闭' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Refresh,
  Bell,
  WindPower,
  Sunny
} from '@element-plus/icons-vue'
import request from "@/util/request.ts";

// 控制状态
const controls = ref({
  restart: false,
  buzzer: false,
  fan: false,
  tempHumidity: false
})
// 处理控制操作
const handleControl = (type: 'restart' | 'buzzer' | 'fan' | 'tempHumidity') => {
  if (type === 'restart') {
    fetch('/stm/restart', {
      method: 'GET',
    }).then(response => {
      if (response.ok) {
        return response.text(); // 如果请求成功，根据响应内容类型选择合适的方法（如 text()、json()、blob() 等）获取数据
      }
      throw new Error('请求失败');
    })
        .then(data => {
          console.log('请求成功，响应数据:', data);
        });
    controls.value.restart = true
    ElMessage.success('设备重启指令已发送')
    setTimeout(() => {
      controls.value.restart = false
    }, 3000)
    return
  }


  if (type === 'fan') {
    fetch('/stm/fan', {
      method: 'GET',
    }).then(response => {
      if (response.ok) {
        return response.text(); // 如果请求成功，根据响应内容类型选择合适的方法（如 text()、json()、blob() 等）获取数据
      }
      throw new Error('请求失败');
    })
        .then(data => {
          console.log('请求成功，响应数据:', data);
        });
      controls.value.fan = !controls.value.fan
      if (controls.value.fan == true) {
          ElMessage.success('风扇开启指令已发送')
      } else {
          ElMessage.success('风扇关闭指令已发送')
      }
    //setTimeout(() => {
    //  controls.value.restart = false
    //}, 3000)
    return
  }

  if (type === 'tempHumidity') {
    fetch('/stm/tempHumidity', {
      method: 'GET',
    }).then(response => {
      if (response.ok) {
        return response.text(); // 如果请求成功，根据响应内容类型选择合适的方法（如 text()、json()、blob() 等）获取数据
      }
      throw new Error('请求失败');
    })
        .then(data => {
          console.log('请求成功，响应数据:', data);
        });
      controls.value.tempHumidity = !controls.value.tempHumidity
      if (controls.value.tempHumidity == true) {
          ElMessage.success('日光灯开启指令已发送')
      } else {
          ElMessage.success('日光灯关闭指令已发送')
      }
    //setTimeout(() => {
    //  controls.value.restart = false
    //}, 3000)
    return
  }

  if (type === 'buzzer') {
    fetch('/stm/buzzer', {
      method: 'GET',
    }).then(response => {
      if (response.ok) {
        return response.text(); // 如果请求成功，根据响应内容类型选择合适的方法（如 text()、json()、blob() 等）获取数据
      }
      throw new Error('请求失败');
    })
        .then(data => {
          console.log('请求成功，响应数据:', data);
        });
      controls.value.buzzer = !controls.value.buzzer
      if (controls.value.buzzer == true) {
          ElMessage.success('蜂鸣器已触发')
      } else {
          ElMessage.success('蜂鸣器已关闭')
      }
    //setTimeout(() => {
    //  controls.value.buzzer = false
    //}, 1000) // 蜂鸣器响一秒后自动关闭
    return
  }

  controls.value[type] = !controls.value[type]
  ElMessage.success(`${type === 'fan' ? '风扇' : '温湿度控制'}已${controls.value[type] ? '开启' : '关闭'}`)
}
</script>

<style scoped>
.control-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  height: 100%;
  padding: 1.2rem;
}

.control-item {
  border: 1px solid rgba(51, 255, 208, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  height: 100%;
}

.control-item:hover {
  transform: translateY(-2px);
}

.control-item.active {
  border-color: rgba(51, 255, 208, 0.3);
}

.control-icon {
  width: 4.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.control-icon .el-icon {
  font-size: 2.4rem;
  color: #33ffd0;
  margin-top: -0.3rem;
  animation: float 2s ease-in-out infinite;
}

.control-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.control-name {
  font-size: 1.4rem;
  color: rgba(51, 255, 208, 0.9);
  font-weight: 500;
}

.control-status {
  font-size: 1.2rem;
  color: #33ffd0;
  font-weight: 500;
}

.control-status.off {
  color: #ff6b6b;
}

.control-status.restarting {
  color: #ffd166;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.active .control-icon .el-icon {
  margin-top: 0;
}
</style>
